/*----------------------------表格页面区域---------------------------------*/
/*--文件路径 src\views\admin\{{ .FileServer }}\{{ .Name }}\list.vue----*/
<template>
    <div>
        <page-main>
            <div class="pageBox">
                <!--
                 /****************************模板修改区域标记********************************************************/
                        搜索模块 显示收齐模块用 v-if="mysearch.isShow"
                -->
                <div class="searchBox">
                    <el-form :inline="true" class="demo-form-inline" :model="mysearch.form">
                     {{range $key, $value := .Fields}}
                        <el-form-item v-if="mysearch.isShow" label="{{$value.Description}}">
                            <el-input v-model="mysearch.form.{{$value.JsonName}}" />
                        </el-form-item>
                     {{end}}
                        <el-form-item>
                            <el-button type="primary" @click="handelSearch">查询</el-button>
                            <el-button v-if="!mysearch.isShow" type="text" @click="mysearch.isShow = true">展开</el-button>
                            <el-button v-if="mysearch.isShow" type="text" @click="mysearch.isShow = false">收起</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- 搜素区域 -----------------结束-->
                <!-- 批量操作 -----------------开始-->
                <div class="batchBox">
                    <span style="margin-right: 20px; color: #a8abb2;font-size: 14px;">
                        已选择{{concat "{{ tableData.currentData.length }}" }}条数据
                    </span>
                    <el-button type="success" @click="handelCaertListData">新增</el-button>
                    <el-button type="danger" :disabled="tableData.currentData.length == 0" @click="handelDeleteByIds">批量删除</el-button>
                    <el-button type="primary" :disabled="tableData.currentData.length == 0" @click="handelbatch">批量操作</el-button>
                </div>
                <el-divider border-style="dashed" style="margin: 10px -15px; width: calc(100% + 30px);" />
                <!-- 批量操作 -----------------结束-->
                <!-- 表格区域 -----------------开始-->
                <div class="tableBox">
                    <el-table
                        ref="multipleTableRef"
                        v-loading="tableData.loading"
                        :data="tableData.list"
                        style="width: 100%;"
                        height="calc(100%)"
                        @selection-change="handleSelectionChange"
                    >
                        <!-- 表格循环体 -----------------开始-->
                        <!-- 多选按钮-->
                        <el-table-column type="selection" width="55" />
                        <!-- 操作按钮区域-->
                        <el-table-column label="操作" width="200" align="center" fixed="left">
                            <template #default="scope">
                                <el-button type="primary" size="small" plain @click="handelUpdateListData(scope.row)">编辑</el-button>
                                <el-divider direction="vertical" border-style="dashed" />
                                <el-dropdown @command="handleMoreOperating($event, scope.row)">
                                    <el-button size="small">
                                        更多操作
                                        <svg-icon name="el-icon-arrow-down" class="el-icon--right" />
                                    </el-button>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item command="resetPassword">待定</el-dropdown-item>
                                            <el-dropdown-item command="delete">删除</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </template>
                        </el-table-column>
                        <!-- 表格循环体----------------开始-----------固定列加一个 fixed-->
                        <!--/****************************模板修改区域标记********************************************************/-->
                            {{range $key, $value := .Fields}}
                                <el-table-column property="{{$value.JsonName}}" label="{{$value.Description}}" show-overflow-tooltip width="100"  />
                            {{end}}
                        <!-- 表格循环体 -----------------结束-->
                    </el-table>
                </div>
                <!-- 表格区域 -----------------结束-->
                <!-- 分页区域 -----------------开始-->
                <el-divider border-style="dashed" style="margin: 10px -15px; width: calc(100% + 30px);" />
                <div class="paginationBox">
                    <el-pagination
                        :default-page-size="100"
                        :page-size="myPagination.size"
                        :page-sizes="myPagination.sizes"
                        :current-page="myPagination.page"
                        layout="total, sizes, ->, prev, pager, next, jumper"
                        :total="myPagination.total"
                        small
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        @prev-click="handlePrevClick"
                        @next-click="handleNextClick"
                    />
                </div>
            <!-- 分页区域 -----------------结束-->
            </div>
            <div class="drawerBox">
                <el-drawer
                    v-model="drawerData.isShow"
                    direction="rtl"
                    size="80%"
                    :before-close="handleDrawerClose"
                    destroy-on-close="ture"
                >
                    <template #title>
                        <span v-if="drawerData.id == 0">新增记录</span>
                        <span v-if="drawerData.id != 0">修改数据</span>
                    </template>
                    <template #default>
                        <div>
                            <FormModeVue :id="drawerData.id" ref="FormModeRef" />
                        </div>
                    </template>
                    <template #footer>
                        <div style="flex: auto;">
                            <el-button @click="handleDrawerCancel">取消</el-button>
                            <el-button v-if="drawerData.id == 0" type="success" @click="handleDrawerCaert">新增</el-button>
                            <el-button v-if="drawerData.id != 0" type="primary" @click="handleDrawerUpdate">修改</el-button>
                        </div>
                    </template>
                </el-drawer>
            </div>
        </page-main>
    </div>
</template>
/*----------------------------逻辑区域---------------------------------*/
<script setup name="{{ .Name }}List">
import { ref, reactive, getCurrentInstance, onMounted, computed  } from 'vue'
import FormModeVue from './components/FormMode.vue'
// #region 系统导入区域
/** 系统导入区域----开始 */
/****************************模板修改区域标记********************************************************/
import {
    api{{ .Name }}List,
    api{{ .Name }}BatchByIds,
    api{{ .Name }}DeleteByIds,
    api{{ .Name }}Delete
} from '@/api/{{ .FileApi }}/{{ .Name }}.js'
const { proxy } = getCurrentInstance()
/** 系统导入区域----结束 */
// #endregion
// #region 搜索配置
/** 搜索配置-----开始 */
const mysearch = reactive({
/****************************模板修改区域标记********************************************************/
    form: {
        {{range $key, $value := .Fields}}
            {{$value.JsonName}}: '',
        {{end}}
    },
    isShow: false,
    loging: false
})
/****************************模板修改区域标记********************************************************/
const searchTitle = computed(() => {
    var obj = {}
    /****************************模板修改区域标记********************************************************/
    {{range $key, $value := .Fields}}
        if (mysearch.form.{{$value.JsonName}} != '') {
            obj['{{$value.Name}} like ?'] = '%' + mysearch.form.{{$value.JsonName}} + '%'
        }
    {{end}}
    return obj
})
const handelSearch = () => {
    getTableData()
}
/** 搜索配置-----结束 */
// #endregion
// #region 批量操作区域
/** 批量操作区域----开始 */
const mybatch = reactive({
    ids: []
})

// 批量修改
const handelbatch = async() => {
    tableData.loading = true
    const res = await api{{ .Name }}BatchByIds({
        'ids': mybatch.ids,
        'batch_type': 'One',
        'batch_value': '要修改数据的值'
    })
    if (res.status === 1 && res.error == '') {
        getTableData()
        proxy.$message.success({
            message: '操作成功',
            center: true
        })
    }
}
// 批量删除
const handelDeleteByIds = async() => {
    proxy.$messageBox.confirm('确定要删除' + tableData.currentData.length   + '条记录吗?', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    }).then(() => {
        // 模板修改区域标记
        // api{{ .Name }}DeleteByIds({ 'ids': mybatch.ids })
        api{{ .Name }}DeleteByIds({ 'ids': mybatch.ids }).then(
            res => {
                if (res.status === 1 && res.error == '') {
                    getTableData()
                    proxy.$message.success({
                        message: '批量删除成功',
                        center: true
                    })
                }
            }
        )
    })
}
/** 批量操作区域----结束 */
// #endregion
// #region 分页区域
/** 分页区域----开始 */
const myPagination = reactive({
    sizes: [50, 100, 200, 300, 500],
    page: 1,    // 当前页
    size: 50,  // 当前页条数
    total: 1000   // 总条数
})
// 每页条数发生变化
function handleSizeChange(value) {
    myPagination.size = value
    getTableData()
}
// 当前页数发生变化
function handleCurrentChange(value) {
    myPagination.page = value
    getTableData()
}
// 上一页
function handlePrevClick(value) {
    myPagination.page = value - 1
    getTableData()
}
// 下一个
function handleNextClick(value) {
    myPagination.page = value + 1
    getTableData()
}
/** 分页区域----结束 */
// #endregion
// #region 数据表格区域
/** 数据表格区域----开始 */
const tableData = reactive({
    loading: false,
    list: [],
    currentData: []
})
// 获取选中数据
const handleSelectionChange = val => {
    tableData.currentData = val
    console.log(val)
    mybatch.ids = val.map(item => {
        return item.id
    })
    console.log(mybatch.ids)
}
const getTableData = async() => {
    tableData.loading = true
    /****************************模板修改区域标记********************************************************/
    // const res = await api{{ .Name }}List
    const res = await api{{ .Name }}List({ page: { from: myPagination.page, limit: myPagination.size, title: searchTitle.value } })
    tableData.loading = false
    if (res.status === 1 && res.error == '') {
        console.log(res)
        tableData.list = res.data.list
        myPagination.total = res.data.total
    }
}
const handleMoreOperating = (event, row) => {
    switch (event) {
        case 'delete':
            handelDelete(row)
            break
        case 0:
            console.log('今天是周日')
            break
        default:
            console.log('期待周末~')
    }
}
// 单独删除
const handelDelete = async row => {
    proxy.$messageBox.confirm('确定要删除' + row.id + '吗?', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    }).then(() => {
        /****************************模板修改区域标记********************************************************/
        api{{ .Name }}Delete({ 'id': row.id }).then(
            res => {
                if (res.status === 1 && res.error == '') {
                    getTableData()
                    proxy.$message.success({
                        message: '操作成功',
                        center: true
                    })
                }
            }
        )
    })
}
/** 数据表格区域----结束 */
// #endregion
// #region 生命周期区域
/** 生命周期区域----开始 */
onMounted(() => {
    getTableData()
})
/** 生命周期区域----结束 */
// #endregion
// #region 弹出窗口区域
/** 弹出窗口区域----开始 */
const FormModeRef = ref(null)
// 新增数据
const handelCaertListData = () => {
    drawerData.isShow = true
    drawerData.id = 0
}
const handelUpdateListData = row => {
    drawerData.isShow = true
    drawerData.id = row.id

}
const drawerData = reactive({
    isShow: false,
    id: 0
})
const handleDrawerClose = done => {
    proxy.$messageBox.confirm('确定要关闭窗口吗', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    }).then(() => {
        done()
    })
}
const handleDrawerUpdate = () => {
    FormModeRef.value.formUpdate().then(() => {
        drawerData.isShow = false
        proxy.$message.success('反馈成功')
        getTableData()
    }).catch(err => {
        proxy.$message.error('反馈错误')
    })
}
const handleDrawerCaert = () => {
    FormModeRef.value.formCreat().then(() => {
        drawerData.isShow = false
        proxy.$message.success('反馈成功')
        getTableData()
    }).catch(err => {
        proxy.$message.error('反馈错误')
        console.log(err)
    })
    // 等等
}
const handleDrawerCancel = () => {
    drawerData.isShow = false
    // 等等
}

/** 弹出窗口区域----结束 */
// #endregion

</script>
/*----------------------------样式---------------------------------*/
<style lang='scss' scoped>
.pageBox {
    //background-color: #cfe2cf;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 130px);
}
.searchBox {
    //background-color: #b4aae9;
    flex-grow: 0;
}
.batchBox {
    //background-color: #90e2a2;
    flex-grow: 0;
}
.tableBox {
    //background-color: #e28589;
    flex-grow: 1;
    overflow: auto;
}
.paginationBox {
    // background-color: #dceb86;
    flex-grow: 0;
    // height: 40px;
}
</style>
